<!DOCTYPE html>
<html>
<head>
	<title>Java文件管理示例</title>
	<!-- 引入Bootstrap CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
	<style>
		body, html {
			height: 100%;
			margin: 0;
		}
		.wrapper {
			position: relative;
			height: 100%;
		}
		.login-form-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300px;
			padding: 20px;
			background-color: #f8f9fa;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		.sidebar {
			position: absolute;
			top: 0;
			left: 0;
			width: 250px;
			height: 100%;
			background-color: #343a40;
			color: white;
			display: flex;
			flex-direction: column;
			padding-top: 20px;
		}
		.sidebar a {
			padding: 15px;
			text-decoration: none;
			color: white;
			display: block;
		}
		.sidebar a:hover {
			background-color: #495057;
		}
		.content-wrapper {
			position: absolute;
			top: 0;
			left: 250px;
			width: calc(100% - 250px);
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.content-header {
			padding: 15px;
			background-color: #007bff;
			color: white;
		}
		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 15px;
		}
		.content iframe {
			flex: 1;
			border: 0;
		}
	</style>
</head>
<body>
<div class="wrapper">
	<!-- 登录表单 -->
	<div class="login-form-wrapper">
		<div class="login-form">
			<h4 class="text-center">登录</h4>
			<form id="loginForm">
				<div class="form-group">
					<label for="username">用户名:</label>
					<input type="text" class="form-control" id="username" name="username" required>
				</div>
				<div class="form-group">
					<label for="password">密码:</label>
					<input type="password" class="form-control" id="password" name="password" required>
				</div>
				<button type="submit" class="btn btn-primary btn-block">登录</button>
			</form>
		</div>
	</div>

	<!-- 侧边栏菜单 -->
	<div class="sidebar">
		<h4 class="text-center">菜单</h4>
		<a href="filemanage.html" target="iframe">文件管理</a>
	</div>

	<!-- 主内容区域 -->
	<div class="content-wrapper" style="display: none;">
		<!-- Content Header (Page header) -->
		<section class="content-header">
			<h1>文件管理</h1>
		</section>

		<!-- Main content -->
		<section class="content">
			<iframe name="iframe" src="filemanage.html" width="100%" scrolling="auto"></iframe>
		</section>
	</div>
</div>

<!-- 引入Bootstrap JS和依赖 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
	document.getElementById('loginForm').addEventListener('submit', function(event) {
		event.preventDefault(); // 阻止表单提交
		var username = document.getElementById('username').value;
		var password = document.getElementById('password').value;

		// 使用Ajax向后端发送请求
		$.ajax({
			type: "POST",
			url: "LoginServlet",
			data: { username: username, password: password },
			success: function(response) {
				if (response.trim() === "success") {
					// 登录成功，显示文件管理页面
					document.querySelector('.content-wrapper').style.display = 'flex';
					document.querySelector('.login-form-wrapper').style.display = 'none'; // 隐藏登录表单
				} else {
					// 登录失败，可以添加一些提示信息
					alert('登录失败，请检查用户名和密码');
				}
			},
			error: function() {
				alert('请求失败，请稍后再试');
			}
		});
	});
</script>
</body>
</html>
